<template>
  <div>
    <el-form-item label="属性">
      <div
        class="attributeDrag"
        id="Drag"
        v-if="attributeListPage.length !== 0"
      >
        <draggable
          v-model="myList"
          group="people"
          @start="drag = true"
          @end="drag = false"
        >
          <div
            class="node_attr_item"
            v-for="(v, i) in attributeListPage.slice(
              (pageNo - 1) * pageSize,
              pageNo * pageSize
            )"
            :key="i"
          >
            <el-input
              size="mini"
              v-model="v.name"
              class="input-with-select prepend_box"
            >
              <el-select
                v-model="v.type"
                slot="prepend"
                placeholder="请选择"
                style="
                  appearance: none;
                  -moz-appearance: none;
                  -webkit-appearance: none;
                "
              >
                <el-option
                  v-for="type in seleType"
                  :key="type.id"
                  :label="type.name"
                  :value="type.id"
                ></el-option>
              </el-select>
            </el-input>
            <!-- 删除按钮 -->
            <el-tooltip
              class="item"
              effect="dark"
              content="拖拽调整顺序"
              placement="right"
            >
              <svg-icon class="draganddrop" icon-class="draganddrop"></svg-icon>
            </el-tooltip>
            <svg-icon
              class="trash"
              icon-class="trash"
              @click="delAttribute(i)"
            ></svg-icon>
          </div>
        </draggable>
      </div>

      <el-pagination
        v-show="attributeListPage.length !== 0"
        size="mini"
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page.sync="pageNo"
        :page-sizes="[5, 10]"
        :page-size="pageSize"
        :total="attributeListPage.length"
        layout="sizes, prev, pager, next"
      >
      </el-pagination>
    </el-form-item>
    <el-form-item label="">
      <el-input
        size="mini"
        v-model="attrPage.seleName"
        class="input-with-select prepend_box"
        clearable
      >
        <el-select
          v-model="attrPage.seleType"
          slot="prepend"
          placeholder="请选择"
          value-key
        >
          <el-option
            v-for="type in seleType"
            :key="type.id"
            :label="type.name"
            :value="type.id"
          ></el-option>
        </el-select>
        <el-button
          slot="append"
          icon="el-icon-plus"
          style="width: 110px"
          @click="addAttribute"
          >添加属性</el-button
        >
      </el-input>
    </el-form-item>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  props: {
    attributeListPage: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    lists() {},
    // 解决拖拽告警-子组件不可直接修改父组件数据
    myList: {
      get() {
        return this.attributeListPage;
      },
      set(value) {
        this.$emit("updateList", value);
      },
    },
  },
  data() {
    return {
      pageNo: 1,
      pageSize: 5,
      totalNum: 0,
      seleType: [
        { id: "STRING", name: "string" },
        { id: "INT", name: "int" },
        { id: "LONG", name: "long" },
        { id: "FLOAT", name: "float" },
        { id: "DOUBLE", name: "double" },
        { id: "BOOL", name: "bool" },
        { id: "OBJECT", name: "object" },
      ],
      //   attributeListPagePage: [],
      attrPage: {
        seleType: "STRING",
        seleName: "",
      },
    };
  },
  methods: {
    // 属性列表添加
    addAttribute() {
      // if(!this.check()){
      //   return
      // }
      var reg = /^[a-zA-Z][-_a-zA-Z0-9]{0,5}/;
      if (!this.attrPage.seleName) {
        this.$msg("请输入属性名称");
        return;
      }
      if (!this.attrPage.seleType) {
        this.$msg("请选择属性类型");
        return;
      }
      if (!reg.test(this.attrPage.seleName)) {
        this.$msg("属性名称首位必须为字母且不能包含特殊符号和空格");
        return;
      }
      const isRepeat = this.attributeListPage.some(
        (item) => item.seleName == this.attrPage.seleName
      );
      if (isRepeat) {
        this.$msg("属性名称不能重复");
        return;
      }
      this.$emit("addAttribute", {
        //   this.attrPage
        type: this.attrPage.seleType,
        name: this.attrPage.seleName,
      });
      //   this.attributeListPage.push({
      //     //   this.attrPage
      //     type: this.attrPage.seleType,
      //     name: this.attrPage.seleName,
      //   });
      this.attrPage.seleName = "";
      //   this.attrPage.seleType = "";
      //添加属性之后 回到第一页
      this.pageNo = 1;
    },

    sizeChange(val) {
      this.pageSize = val;
      this.pageNo = 1;
    },
    currentChange(val) {
      this.pageNo = val;
    },
    // 属性列表删除
    delAttribute(i) {
      this.$emit("delAttribute", i);
      //   this.attributeListPage = this.attributeListPage.filter(
      //     (v, index) => index != i
      //   );
    },
  },
};
</script>

<style lang='scss' scoped>
.prepend_box {
  /deep/ .el-select {
    width: auto !important;
  }
}
.node_attr_item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}
</style>